'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _toArray2 = require('babel-runtime/helpers/toArray');

var _toArray3 = _interopRequireDefault(_toArray2);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

exports.getColumnKey = getColumnKey;

var _react = require('react');

var React = _interopRequireWildcard(_react);

var _menu = require('../menu');

var _menu2 = _interopRequireDefault(_menu);

var _dropdown = require('../dropdown');

var _dropdown2 = _interopRequireDefault(_dropdown);

var _icon = require('../icon');

var _icon2 = _interopRequireDefault(_icon);

var _button = require('../button');

var _button2 = _interopRequireDefault(_button);

var _message = require('../message');

var _message2 = _interopRequireDefault(_message);

var _FilterDropdownMenuWrapper = require('./FilterDropdownMenuWrapper');

var _FilterDropdownMenuWrapper2 = _interopRequireDefault(_FilterDropdownMenuWrapper);

var _ColumnFilterMenuItem = require('./ColumnFilterMenuItem');

var _ColumnFilterMenuItem2 = _interopRequireDefault(_ColumnFilterMenuItem);

require('../menu/style');

require('../icon/style');

require('../button/style');

require('../message/style');

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } }

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

function getColumnKey(column, index) {
    return column.key || column.dataIndex || index;
} /**
   * @date 2019-01-21
   */

function getParentNode(triggerNode) {
    return triggerNode.parentNode;
}

var ColumnFilterMenu = function (_React$Component) {
    (0, _inherits3['default'])(ColumnFilterMenu, _React$Component);

    function ColumnFilterMenu(props) {
        (0, _classCallCheck3['default'])(this, ColumnFilterMenu);

        var _this = (0, _possibleConstructorReturn3['default'])(this, (ColumnFilterMenu.__proto__ || Object.getPrototypeOf(ColumnFilterMenu)).call(this, props));

        _this.items = {}; // 存储编辑的 column 的组件的 ref
        _this.handleEditChange = function (editing) {
            var prevCustomColumns = _this.state.prevCustomColumns;

            _this.setState({
                editing: editing,
                customColumns: prevCustomColumns
            });
        };
        // 渲染标题旁边的 icon
        _this.renderFilterIcon = function () {
            var locale = _this.props.locale;

            return React.createElement(_icon2['default'], { title: locale.filterTitle, className: 'custom-bars', type: 'bars' });
        };
        // 确认按钮点击
        _this.handleConfirmBtnClick = function () {
            var _this$props = _this.props,
                _this$props$columns = _this$props.columns,
                columns = _this$props$columns === undefined ? [] : _this$props$columns,
                confirmFilter = _this$props.confirmFilter,
                store = _this$props.store;

            var customColumnsGetPromise = [];
            columns.map(function (column, index) {
                return getColumnKey(column, index);
            }).forEach(function (key) {
                var columnFilterMenuItem = _this.items[key];
                if (columnFilterMenuItem) {
                    customColumnsGetPromise.push(columnFilterMenuItem.getValidateCustomColumn());
                }
            });
            Promise.all(customColumnsGetPromise).then(function (_ref) {
                var _ref2 = (0, _toArray3['default'])(_ref),
                    customColumns = _ref2.slice(0);

                _this.setState({
                    customColumns: customColumns,
                    editing: false
                });
                store.setState({ customColumns: customColumns });
                confirmFilter(customColumns);
            }, function (err) {
                _message2['default'].error(err && err.message);
            });
        };
        // 获取编辑组件的 ref
        _this.handleItemRef = function (key, element) {
            _this.items[key] = element;
        };
        _this.state = {
            editing: false,
            customColumns: props.customColumns || [],
            prevCustomColumns: props.customColumns || []
        };
        return _this;
    }

    (0, _createClass3['default'])(ColumnFilterMenu, [{
        key: 'render',
        value: function render() {
            var _props = this.props,
                locale = _props.locale,
                prefixCls = _props.prefixCls,
                dropdownPrefixCls = _props.dropdownPrefixCls,
                getPopupContainer = _props.getPopupContainer;
            var editing = this.state.editing;

            var editTitle = this.renderEditTitle();
            var editContent = this.renderEditContent(); // this.renderMenus(columns)
            var menus = React.createElement(
                _FilterDropdownMenuWrapper2['default'],
                { className: prefixCls + '-dropdown custom-column-dropdown' },
                React.createElement(
                    'div',
                    { className: dropdownPrefixCls + '-menu-item' },
                    editTitle
                ),
                React.createElement(
                    _menu2['default'],
                    { multiple: true, prefixCls: dropdownPrefixCls + '-menu', getPopupContainer: getParentNode },
                    editContent
                ),
                React.createElement(
                    'div',
                    { className: prefixCls + '-dropdown-btns' },
                    React.createElement(
                        _button2['default'],
                        { size: 'small', className: prefixCls + '-dropdown-link confirm', onClick: this.handleConfirmBtnClick },
                        locale.filterConfirm
                    )
                )
            );
            return React.createElement(
                _dropdown2['default'],
                { trigger: ['click'], overlay: menus, visible: editing, onVisibleChange: this.handleEditChange, getPopupContainer: getPopupContainer, forceRender: true },
                this.renderFilterIcon()
            );
        }


    }, {
        key: 'renderEditItem',
        value: function renderEditItem(column, index) {
            var _this2 = this;

            var customColumns = this.state.customColumns;

            var key = getColumnKey(column);
            var customColumn = customColumns.find(function (fCustomColumn) {
                return fCustomColumn.fieldKey === key;
            });
            return React.createElement(
                _menu2['default'].Item,
                { key: key },
                React.createElement(_ColumnFilterMenuItem2['default'], { customColumn: customColumn, column: column, index: index, ref: function ref(item) {
                        return _this2.handleItemRef(key, item);
                    } })
            );
        }
        // 渲染编辑的标题


    }, {
        key: 'renderEditTitle',
        value: function renderEditTitle() {
            var filterBarLocale = this.props.filterBarLocale;

            var _ref3 = filterBarLocale || {},
                display = _ref3.display,
                field = _ref3.field,
                fixedLeft = _ref3.fixedLeft,
                orderSeq = _ref3.orderSeq;

            return React.createElement(
                'div',
                null,
                React.createElement(
                    'div',
                    { className: 'dropdown-menu-text' },
                    display
                ),
                React.createElement(
                    'div',
                    { className: 'dropdown-menu-text' },
                    field
                ),
                React.createElement(
                    'div',
                    { className: 'dropdown-menu-text' },
                    fixedLeft
                ),
                React.createElement(
                    'div',
                    { className: 'dropdown-menu-text' },
                    orderSeq
                )
            );
        }
        // 渲染编辑区域内容

    }, {
        key: 'renderEditContent',
        value: function renderEditContent() {
            var _this3 = this;

            var _props$columns = this.props.columns,
                columns = _props$columns === undefined ? [] : _props$columns;

            return columns.map(function (column, index) {
                return _this3.renderEditItem(column, index);
            });
        }
    }], [{
        key: 'getDerivedStateFromProps',
        value: function getDerivedStateFromProps(nextProps, prevState) {
            var customColumns = nextProps.customColumns;
            var prevCustomColumns = prevState.prevCustomColumns;

            if (customColumns && customColumns !== prevCustomColumns) {
                return {
                    customColumns: customColumns,
                    prevCustomColumns: customColumns
                };
            }
            return null;
        }
    }]);
    return ColumnFilterMenu;
}(React.Component);

exports['default'] = ColumnFilterMenu;
